<template>
	<view>
		<nav-header title="分享给好友" :showRight="false"></nav-header>
		<code-popup type="share" :show="true" :share-data="share"
			:qr-url="`https://h5.dgyxy.com/pageSubOne/mine/mine-share-user?shareCode=${shareInfo.shareCode}`"
			:values="{'分享码':shareInfo.shareCode}" @saveImage="saveImage" @qrcodeUrl="qrcodeUrl"></code-popup>
	</view>
</template>

<script>
	import {
		isNullOrEmpty
	} from '../../utils';
	import ShareCanvas from '@/components/ShareCanvas/ShareCanvas.vue';
	import LoadingMask from '@/components/loading-mask/loading-mask.vue';
	import {
		genShareQrcode,
		getShareData
	} from '@/utils/qrcode';
	export default {
		components: {
			ShareCanvas,
			LoadingMask
		},
		data() {
			return {
				shareInfo: {},
				share: {
					title: '邀请你加入',
					path: '/pageSubOne/common/invitation-letter',
					imageUrl: "https://file.dgyxy.com/resource/invitation1.png",
					desc: '通过友星缘，我已经赚取了..',
					content: ''
				},
				qrcode: null,
				shareImgUrl: null
			}
		},
		methods: {
			saveImage() {
				if (isNullOrEmpty(this.shareImgUrl)) {
					uni.showToast({
						icon: 'none',
						title: "正在加载分享图片，请稍后再试"
					})
					return
				}
				// #ifdef MP-WEIXIN
				wx.downloadFile({
					url: this.shareImgUrl,
					success: (res) => {
						wx.showShareImageMenu({
							path: res.tempFilePath
						})
					}
				})
				// #endif
				// #ifndef MP-WEIXIN
				uni.shareWithSystem({
					imageUrl: this.shareImgUrl,
				})
				// #endif
			},
			qrcodeUrl(url) {
				this.qrcode = url
				const canvasBodyObject = getShareData().shareCodeData(this.shareInfo.shareCode)
				this.$http({
					url: "/canvas/userShare",
					method: "GET",
					data: {
						body: JSON.stringify(canvasBodyObject)
					},
				}).then((res) => {
					// this.share.imageUrl = res
					this.shareImgUrl = res
				})
			},
			copy2() {
				let text = this.shareInfo.shareCode
				uni.setClipboardData({
					data: text.toString(),
					success: function(res) {
						console.log('复制的信息2：', text);
						uni.showToast({
							title: '复制成功',
						});
					}
				});
			},
			upload() {

			},
			share() {

			},
			getData() {
				this.$http({
					url: `/share/getShare`,
					method: 'GET'
				}).then(res => {
					this.shareInfo = res
					this.userStore.userInfo.shareCode = this.shareInfo.shareCode
					this.$set(this.share, 'path', this.share.path + "?shareCode=" + this.shareInfo.shareCode +
						'&sign=' + new Date().getTime())
				})
			}
		},
		computed: {
			userInfo() {
				return this.userStore.userInfo;
			}
		},

		onShow() {
			this.getData()
			genShareQrcode(getShareData().shareCodeData(this.shareInfo.shareCode)).then((code) => {
				this.qrcode = code
			});
		},
		/* onShareAppMessage(res) {
			let pages = getCurrentPages(); //获取当前页面栈的信息
			let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '邀请好友',
				path: `pages/tabbar/chat?id=${this.id}&shareCode=${this.shareInfo.shareCode}` //后面是路径上要传递的参数
			}
		} */

	}
</script>

<style lang="less" scoped>
	:deep(.u-popup__content) {
		border-radius: 10px;
	}

	.user-info {
		width: 100vw;
		height: 70vh;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.head {
			display: flex;
			align-items: center;

			.right {

				// padding-top: 100rpx;
				text {
					margin-left: 40rpx;
				}

				.num-item {
					display: flex;
					align-items: center;
					color: #aaa;
					font-size: 30rpx;
					margin-top: 20rpx;

					button {
						height: 40rpx;
						line-height: 40rpx;
						margin-left: 20rpx;
						background-color: #048df5;
						color: #fff;
					}
				}
			}
		}

		.code-img {
			width: 800rpx;
			height: 800rpx;
			margin-top: 10rpx;
		}

		.sub-title {
			font-size: 25rpx;
			color: #aaa;
		}

		.share {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			bottom: 0;
			left: 0;

			.share-item {
				display: flex;
				align-items: center;
				flex-direction: column;
				padding: 20rpx;
				width: 50%;

				.share-img {
					width: 65rpx;
					height: 65rpx;
				}

				text {
					margin-top: 20rpx;
				}
			}

		}
	}
</style>